<template>
    <div class="shopIndex">

        <shop-header></shop-header>
        <index-service class="index-service"></index-service>
        <sticky :check-sticky-support="false" id="details_tabItems">
            <div class="insurance__title-index">
                <scroller :lock-x="false" lock-y>
                    <div class="insurance__title-index_btn">
                        <checker v-model="insureType" radio-required default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
                            <checker-item class="grid-center" :value="item.key" v-for="(item, index) in baseRiskCodeList" :key="index">{{item.value}}</checker-item>
                        </checker>
                    </div>
                </scroller>
            </div>
        </sticky>
        <!-- <insurance-list></insurance-list> -->
        <transition name="slide-fade">
            <div id="insurance_list-index" v-show="showAnimate" class="weui-panel weui-panel_access">
                <div v-if="shop.shopHeaderState.listType!='1'" class="weui-panel__bd">
                    <a :style="getProStyle(index)" v-for="(insure,index) in insurance.curShowinsurance" @click="goDetails(insure)" :key="index" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd"><img :src="insure.imgUrl" alt="" class="weui-media-box__thumb"></div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title">{{insure.productCname}}
                            </h4>
                            <div class="weui-media-box__desc">{{insure.descrition}}</div>
                            <div class="weui-media-box__desc">
                                <span v-show="insure.baseStatus=='1'">承保年龄:{{insure.minAge}}-{{insure.maxAge}}周岁</span>&nbsp保障期限:{{insure.maxDeadLine}}天</div>
                            <p class="common__card--leftspan common__color--DefaultTheme">¥{{insure.minPrice}}
                                <span v-show="insure.isQuota==0" class="common__smallsize">起</span>
                            </p>
                        </div>
                    </a>
                    <!-- <div :style="insuranceBtn"></div> -->
                </div>
                <grid v-if="shop.shopHeaderState.listType=='1'" :cols="2" style="background-color: #fff;" class="color-white shopIndex-grid">
                    <grid-item v-for="(insure, index) in insurance.curShowinsurance" @click.native="goDetails(insure)" :key="index" :class="getIndexStyle(index)">
                        <card>
                            <img slot="header" class="common__card--img" :src="insure.imgUrl">
                            <div slot="content" class="card-padding">

                                <span class="common__card--leftspan">{{insure.productCname}}</span>
                                <span class="common__card--rightspan">¥{{insure.minPrice}}
                                    <span style="font-size: 11px;" v-show="insure.isQuota==0">起</span>
                                </span>
                                <p class="common__card--p">
                                    {{insure.descrition}}
                                </p>
                            </div>
                        </card>
                    </grid-item>
                    <div v-show="insurance.curShowinsurance.length>0" class="btn-grid"></div>
                </grid>

            </div>
        </transition>

        <div class="shopIndex__footer">
            <div @click="onlineClick" class="shopIndex__footer-btn">
                <div class="shopIndex__footer-type">
                    <img src="~assets/x3/ico/icon-dh.png">
                    <div class="shopIndex__footer-item">&nbsp咨询</div>
                </div>
            </div>
            <div @click="openShare()" class="shopIndex__footer-btn">
                <div class="shopIndex__footer-type">
                    <img src="~assets/x3/ico/icon-tra.png">
                    <div class="shopIndex__footer-item">&nbsp分享</div>
                </div>
            </div>
        </div>
        <x-dialog v-model="isShowShare" class="share-Einv" hide-on-blur>
            <div class="share-div">
                <qrcode class="share-qrcode" :value="shopShareUrl" type="img"></qrcode>
                <div id="shop-share"></div>
            </div>
        </x-dialog>
        <!-- 微信遮罩提示 -->
        <div class="weChatShadeDiv" v-show="weChatShade" @click="shareHide">
            <img class="details__arrow" src="~assets/x3/share-it.png">
            <a href="JavaScript:void(0);" class="follow">
                <p>
                    请点击右上角<br>即可分享当前内容
                </p>
            </a>
        </div>
    </div>
</template>

<script>
import onlineCustomerService from "src/js/onlineCustomerService";//引入在线客服js
import { RequestUrl } from "src/common/url";
import SharePage from "src/js/sharePage"; //引入微信分享js
import share from 'src/common/share';
import "src/assets/share/share.min.css";
import "src/assets/share/jquery.share.min.js";
import { XHeader, CheckerItem, Group, Scroller, Checker, Cell, XButton, Panel, XDialog, Qrcode, Sticky, Grid, GridItem, Card } from "vux";
import indexService from "src/components/index/indexService";
import shopHeader from "src/components/shop/shopHeader";
// import InsuranceList from "src/components/insurance/insuranceList";
import { FooterIndex, Mutations, RouteUrl, WeChatShare, Url_Key } from "src/common/const";
import { mapState } from "vuex";
export default {
    computed: mapState([
        "user",
        "saveInsure",
        "isShop",
        "shareUuid",
        "isWeChar",
        "shop",
        "isInitData",
        "riskCodeList",
        "insurance",
        "isWeAuth",
        "isQueryHeader"
    ]),
    components: {
        Group,
        XHeader,
        Cell,
        Scroller,
        Checker,
        CheckerItem,
        // InsuranceList,
        shopHeader,
        indexService,
        XDialog,
        Qrcode,
        Sticky,
        Grid,
        GridItem,
        Card

    },
    data() {
        return {
            insureType: "all",
            isShowShare: false,
            shopShareUrl: "",
            weChatShade: false,
            // isMaga: false,
            isReadRisk: false,
            baseRiskCodeList: [
                {
                    key: "all",
                    value: "全部"
                }
            ],
            showAnimate: true,
            isInitShare: false,
        };
    },
    watch: {
        isInitData(cur, old) {
            if (cur) {
                this.shopSateInit();
                if (sessionStorage["SHOP_INDEX_IS_MAGA"] == "true") {
                    this.queryInsure("refresh");
                } else {
                    this.queryInsure("infinite");
                }
                if (this.isQueryHeader) {
                    this.initShare();
                }
            }
        },
        isQueryHeader(cur, old) {
            if (cur && this.isInitData) {
                this.initShare();
            }

        },
        riskCodeList(cur, old) {
            if (!this.isReadRisk) {
                for (let i = 0; i < cur.length; i++) {
                    this.isReadRisk = true;
                    this.baseRiskCodeList.push(cur[i]);
                }
            }
            //初始化三方链接信息
            // this.initUrlParam(cur);

        },
        insureType(cur, old) {
            let _this = this;
            this.showAnimate = false;
            // $("#insurance_list").fadeOut();
            if (sessionStorage["SHOP_INDEX_IS_MAGA"] == "true") {
                this.queryInsure("refresh");
            } else {
                this.queryInsure("infinite");
            }
            // $("#insurance_list").fadeIn();
            setTimeout(function () {
                _this.showAnimate = true;
            }, 100);
        }
    },
    methods: {
        getIndexStyle(index) {
            if (index % 2 == 0) {
                return "common_car--griditem-left index__card";
            } else {
                return "common_car--griditem-right index__card";
            }
        },
        goDetails(insure) {
            let curInsure = {
                riskCode: insure.riskCode,
                indexInsure: insure
            };
            //保存产品信息
            this.$common.storeCommit(this, Mutations.INSURE_DATA_INDEX_DATA, curInsure);


            let parmList = [];

            let urlPro = {
                key: Url_Key.PRODUCT_ID,
                value: this.saveInsure.indexData.id
            }
            parmList.push(urlPro);

            localStorage["IS_SHOP_DETAIL"] = "T";
            //组合URI并跳转
            this.$common.goUrl(this, RouteUrl.DETAILS, this.$common.setShareUrl(parmList));
        },
        getProStyle(value) {
            if (value % 2 == 0) {
                return "background-color:#FAFAFA;";
            } else {
                return "background-color: #FFF;";
            }
        },
        onlineClick() {
            // onlineCustomerService.onlineClickOfMobile(this, '4008882008');
            //触发在线客服的click事件，IOS系统在使用.native修饰符时，需要调用2次才能触发到click
            if (localStorage["BOTYPE"] == "I") {
                $(".zhiCustomBtn").trigger("click");
                $(".zhiCustomBtn").trigger("click");
            } else {
                $(".zhiCustomBtn").trigger("click");
                // $(".zhiCustomBtn").trigger("click");
            }
        },
        shareHide() {
            this.weChatShade = false;
            //启用滚动
            // $("body").css("overflow-y", "auto");
        },
        openShare() {
            this.$common.saveShare("二维码", this, 3);
            if (localStorage["IS_WE_CHAR"] == "T") {
                // 微信
                this.weChatShade = true;
                // $("body").css("overflow-y", "hidden");
            } else {
                this.isShowShare = !this.isShowShare;
                //百度分享打开
                // this.showBaiduShare = true;
            }
        },
        initShare() {
            // refShareUUid
            if (!this.isInitShare) {
                let _this = this;
                let parmList = [];
                let uuid = "";
                if (sessionStorage["SHOP_INDEX_IS_MAGA"] == "true") {
                    uuid = this.$encode.hex_md5(this.user.userDto.userCode + ":1");
                    this.$common.storeCommit(this, Mutations.SET_SHARE_UUID, uuid);
                    // uuid = this.shareUuid;
                    sessionStorage["SHARE_COMMON_TYPE"] = "USER";
                } else {
                    sessionStorage["SHARE_COMMON_TYPE"] = "REF";
                    uuid = this.saveInsure.refShareUUid;
                }
                let urlParm = {
                    key: Url_Key.SHARE_UUID,
                    value: uuid
                }
                parmList.push(urlParm);
                let shareUrl = RequestUrl.BASE_URL + RouteUrl.SHOP_INDEX + this.$common.setShareUrl(parmList);
                this.shopShareUrl = shareUrl;
                let shopIntroduct = this.shop.shopHeaderState.shopIntroduct;
                if (this.$common.isEmpty(shopIntroduct)) {
                    shopIntroduct = "恒华出行宝";
                }

                let imgUrl = this.shop.shopHeaderState.header;
                if (imgUrl.indexOf("http:") < 0 && imgUrl.indexOf("https:") < 0) {
                    //补全产品的图片路径
                    imgUrl = RequestUrl.WEB_PATH + imgUrl;
                }
                if (imgUrl == "") {
                    imgUrl = RequestUrl.WEB_PATH + "sticcxb/upload/assets/x3/logo.jpg"
                }

                // alert("shopUrl:" + shareUrl);
                let shareData = {
                    _this: this,
                    shareData: {
                        title: this.shop.shopHeaderState.shopName,
                        desc: shopIntroduct,
                        imgUrl: imgUrl,
                        url: shareUrl,
                        _this: this,
                        type: 3
                    }
                };
                document.title = this.shop.shopHeaderState.shopName;

                share.shareInit(shareData);

                SharePage.weChatShare(shareData);
                this.isInitShare = true;
            }
            // $(document).on('click', '.bds_tqq', function () {
            //     _this.$common.saveShare("百度-腾讯微博", _this, "");
            // });
            // $(document).on('click', '.bds_weixin', function () {
            //     _this.$common.saveShare("百度-微信", _this, "");
            // });
        },
        queryInsure(operation, done) {
            let routeUrl = this.$route.path;
            this.userCode = "";
            if (sessionStorage["SHOP_INDEX_IS_MAGA"] == "true") {
                this.userCode = this.user.userDto.userCode;
            } else {
                this.userCode = this.saveInsure.refereeData.userCode;
            }
            let queryData = {
                _this: this,
                operation: operation,
                riskCode: this.insureType,
                done: done,
                type: true,
                userCode: this.userCode,
            };
            // alert(this.isShop);
            // alert(this.saveInsure.refereeData.userCode);
            // alert(this.userCode);
            this.$common.storeCommit(this, Mutations.INSURANCE_OPERATION, queryData);
        },
        shopSateInit() {
            let _this = this;
            let userCode = "";
            if (sessionStorage["SHOP_INDEX_FORM_PATH"] == RouteUrl.SHOP_MANAGE) {
                sessionStorage["SHOP_INDEX_IS_MAGA"] = "true";
                // if (sessionStorage["SHOP_INDEX_IS_MAGA"] == "true") {
                //     let i = 0;
                // } else {
                //     let j = 0;
                // }
                // this.isMaga = true;
                userCode = _this.user.userDto.userCode;
                this.$common.storeCommit(this, Mutations.IS_SHOW_ROUTE_RED, true);
            } else {
                if (_this.saveInsure.refereeData != false) {
                    // this.isMaga = false;
                    userCode = _this.saveInsure.refereeData.userCode;
                } else {
                    this.$common.storeCommit(this, Mutations.IS_SHOW_ROUTE_RED, true);
                    userCode = _this.user.userDto.userCode;
                }
            }
            let queryData = {
                _this: _this,
                userCode: userCode,
                type: "acc",
                isMana: false,
                isShopIndex: true,
            }
            _this.$common.storeCommit(_this, Mutations.SET_SHOP_HEADER_STATE, queryData);
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["SHOP_INDEX_FORM_PATH"] = from.path;
        next();
    },
    beforeMount() {
        if (!this.isInitData) {
            this.$common.storeCommit(this, Mutations.GET_IP_BAIDU_REGION, this);
        }
    },
    beforeDestroy() {
        this.$common.storeCommit(this, Mutations.IS_SHOW_ROUTE_RED, false);
    },
    mounted() {
        // document.title = "我的店铺";
        sessionStorage["DETAILS_FORM_URL"] = RouteUrl.SHOP_INDEX;
        sessionStorage["SERVICE_GOBACK_URL"] = RouteUrl.SHOP_INDEX;


        if (!this.isReadRisk) {
            for (let i = 0; i < this.riskCodeList.length; i++) {
                this.isReadRisk = true;
                this.baseRiskCodeList.push(this.riskCodeList[i]);
            }
        }
        let _this = this;
        // _this.shopSateInit();
        // setTimeout(() => {
        //     _this.shopSateInit();
        // }, 100);
        if (this.isInitData) {
            _this.shopSateInit();
            if (sessionStorage["SHOP_INDEX_IS_MAGA"] == "true") {
                this.queryInsure("refresh");
            } else {
                this.queryInsure("infinite");
            }
            if (this.isQueryHeader) {
                _this.initShare();
            }
        }
        this.$common.storeCommit(this, Mutations.SET_CUR_SHOWINSURANCE, "");

        setTimeout(() => {
            if (_this.isInitData && _this.insurance.curShowinsurance.length == 0) {
                _this.queryInsure("refresh");
            }
        }, 2000);

        _this.queryInsure("infinite");
        $(window).scroll(function () {
            if (_this.$route.path == RouteUrl.SHOP_INDEX) {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                // console.log(scrollTop);
                // console.log(windowHeight);
                // console.log(scrollHeight);
                if (scrollHeight - (scrollTop + windowHeight) < 80) {
                    _this.queryInsure("infinite");
                }
            }
        });


        // let data = {
        //     top: "121",
        //     btn: "75",
        //     other: "margin-top:21vh"
        // }

        this.$common.storeCommit(this, Mutations.SET_IS_SHOP, true);
        // this.$common.storeCommit(this, Mutations.INSURANCE_LIST_TOP, data);
        // this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 400);
        // this.$common.storeCommit(this, Mutations.VUE_SCROLLER_NO_MORE_DATA, "");
        this.$init.subPageInit(this);

        let data = { product: "", user: "" };
        if (this.user.isLogin) {
            data.user = this.user.userDto;
        }
        //远程加载在线客服js
        onlineCustomerService.initJsFile(this, data);
    },
}
</script>

<style  lang="scss" >
.btn-grid {
  height: 10px;
  width: 100%;
  float: left;
}
.insurance__head {
  position: relative;
  width: 100%; // max-width: 750px;
  height: 46px; // background-color: #f95;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.shopIndex-grid {
  .weui-grid:before {
    border-right: 1px solid #fff;
  }
  .weui-grid:before {
    border-right: 1px solid #fff;
  }
  .weui-grid:after {
    border-bottom: 1px solid #fff;
  }
}

// .share-Einv {
//   .weui-dialog {
//     max-width: 80%;
//     width: 250px;
//     border-radius: 4px;
//     padding-bottom: 2px;
//   }
//   // .dialog-title {
//   //     line-height: 30px;
//   //     color: #666;
//   // }
//   // .vux-close {
//   //     margin-top: 8px;
//   //     margin-bottom: 8px;
//   // }
// }
// .share-div {
//   padding-top: 10%;
//   padding-bottom: 10%;
// }
.index-service {
  position: relative;
  //   z-index: 100;
}

.shopIndex__footer-type {
  clear: both;
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 50%;
  height: 100%;
}
.shopIndex {
  a:link {
    background-color: #fff;
  }
  a:visited {
    background-color: #fff;
  }
  a:hover {
    background-color: #fff;
  }
  a:active {
    background-color: #fff;
  }
}
.shopIndex__footer-item {
  float: left;
  line-height: 40px;
}

.shopIndex__footer-btn {
  width: 50%;
  float: left;
  display: block;
  height: 40px;
  text-align: center;
  img {
    width: 25px;
    float: left;
    margin-top: 8px;
  }
}

.shopIndex__footer {
  font-size: 16px;
  padding-left: 5%;
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 40px;
  background-color: #fff; // div {
  //     height: 100%;
  //     line-height: 47px;
  //     text-align: center;
  //     font-size: 20px;
  // }
  box-shadow: 0px 0px 10px 1px #efefef;
}

// .share-qrcode {
//   margin: 0 auto;
//   display: block;
// }
.insurance {
  background-color: #f0f0f0;
}

.insurance__title-index {
  position: relative;
  height: 35px; // max-width: 750px;
  padding: 5px 20px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.insurance__title-index_btn {
  width: max-content;
  text-align: center;
}

.insurance__list {
  position: relative; // max-width: 750px;
  background-color: #C8161D;
}

.grid-center {
  color: #666;
  font-size: 14px;
}

a:link {
  text-decoration: none;
  //   color: #fff;
}

a:visited,
a:active,
a:linked {
  text-decoration: none;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.weui-panel {
  margin-top: 0px !important;
}
#insurance_list-index {
  margin-bottom: 120px;
}
.weui-media-box__hd {
  width: 120px !important;
  height: 90px !important;
}

.weui-media-box__bd {
  height: 90px !important;
}

.weui-media-box__title {
  color: #000;
  font-size: 15px !important;
}

.weui-media-box__desc {
  margin-top: 0px !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
  color: #666666 !important;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
</style>
